<template>
    <div>
        <el-form :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="类型">
                <el-col :span="12">
                    <el-select v-model="ruleForm.types"
                        placeholder="请选择类型">
                        <el-option :label="item.label"
                            :value="item.value"
                            v-for="(item, i) in noticeOption"
                            :key="i"></el-option>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="会员账号"
                v-if="isUser">
                <el-col :span="12">
                    <el-input disabled
                        v-model="service.username"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="用户昵称"
                v-if="isUser">
                <el-col :span="12">
                    <el-input disabled
                        v-model="service.nickname"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="选择等级"
                prop="rating"
                v-else>
                <el-col :span="12">
                    <el-select v-model="ruleForm.rating"
                        placeholder="请选择会员等级">
                        <el-option label="所有等级"
                            value="0"></el-option>
                        <el-option :label="item.title"
                            :value="item.id"
                            v-for="(item, i) in rattingList"
                            :key="i"></el-option>
                    </el-select>
                </el-col>
            </el-form-item>

            <!-- <el-form-item label="图片" prop="piclink" :label-width="formLabelWidth">
        <el-col :span="24">
          <el-input v-model="ruleForm.piclink" autocomplete="off" class="mar_bottom_5"></el-input>

          <compressimgUpload
            :onSuccess="onSuccess"
            :pic="ruleForm.piclink"
            :isOneImg="true"
            :files="fileList"
          ></compressimgUpload>
        </el-col>
      </el-form-item>
      <el-form-item label="链接" prop="links" :label-width="formLabelWidth">
        <el-col :span="16">
          <el-input  v-model="ruleForm.links" autocomplete="off"></el-input>
          <LinkMenu @sendRow="getSendRow" style="margin-top:10px"></LinkMenu>
        </el-col>
      </el-form-item> -->

            <el-form-item label="消息内容"
                prop="msg">
                <el-col :span="12">
                    <el-input type="textarea"
                        v-model="ruleForm.msg"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="链接"
                prop="links"
                v-if="ruleForm.types == 1">
                <el-col :span="12">
                    <el-input type="text"
                        v-model="ruleForm.links"></el-input>
                </el-col>
                <el-col :span="4"
                    style="margin-left:15px">
                    <LinkMenu @sendRow="getSendRow"></LinkMenu>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                    @click="submitForm('ruleForm')">添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import LinkMenu from "@/components/currency/Link_menu.vue";

export default {
    props: {
        service: {
            type: Object,
            default: () => { }
        },
        isUser: {
            type: Boolean,
            default: false
        }
    },
    components: {
        compressimgUpload,
        LinkMenu
    },
    data () {
        return {
            url_header: "",
            noticeOption: [
                {
                    label: "发送模板消息",
                    value: 1
                },
                {
                    label: "发送客服消息",
                    value: 0
                }
            ],
            fileList: [],
            rating: "",
            bool: true,
            ruleForm: {
                msg: "",
                rating: "",
                piclink: "",
                links: "",
                types: this.service.types || 1
            },
            rattingList: this.$store.state.ratting,
            rules: {
                rating: [
                    { required: true, message: "请选择会员等级", trigger: "change" }
                ],
                msg: [{ required: true, message: "请填写消息内容", trigger: "blur" }]
            },
            formLabelWidth: "120px"
        };
    },
    computed: {
        // getRatting () {
        //     return this.$store.state.ratting;
        // }
    },
    watch: {
        // getRatting (val) {
        //     this.rattingList = val;
        // }
    },
    created () {
        this.$api.getUser.get_rank({}).then(res => {
            if (res.data.code == 200) {
                this.rattingList = res.data.result;
                this.$store.commit("setRatting", res.data.result);
            }
        });
        // this.$api.getSettings.getSettingsList({ cate: "wx" }).then(res => {
        //     if (res.data.code == 200 && res.data.status == 1) {
        //         res.data.result.forEach(item => {
        //             if (item.title == "手机端网址") {
        //                 this.url_header = item.value;
        //                 // this.formUrl.value = item.value;
        //             }
        //         });
        //     } else {
        //         this.$fnc.alertError(res.data.code_desc, res.data.result);
        //     }
        // });
    },
    methods: {
        getSendRow (row) {
            console.log(row);
            this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
            if (row == null) return false;
            // this.ruleForm.links = this.url_header;
            this.ruleForm.links = "";
            if (!row.disable && row.title == "自定义链接") {
                this.ruleForm.links = "";
                return false;
            }
            if (row.url) {
                this.ruleForm.links = this.ruleForm.links + row.url;
            }
            if (row.url_title == "产品分类" && row.click_title == "供应商分类") {
                this.ruleForm.links =
                    this.ruleForm.links + "/pages/shop/supplier/supplier?cate=" + row.id;
                return;
            }
            if (row.url_title == "产品分类" && row.click_title != "供应商分类") {
                this.ruleForm.links =
                    this.ruleForm.links + "/shop/shopsearch?cate_id=" + row.id;
            }
            if (row.url_title == "旅游产品分类") {
                this.ruleForm.links =
                    this.ruleForm.links + "/tourshop/cate?cate_id=" + row.id;
            }
            if (row.url_title == "插件管理") {
                // this.ruleForm.links = this.ruleForm.links + row.url || "";
            }
            if (row.url_title == "商品选择") {
                this.ruleForm.links =
                    this.ruleForm.links + "/pages/shop/shopdetail/shopdetail?id=" + row.id;
            }
            if (row.url_title == "文章添加") {
                this.ruleForm.links =
                    this.ruleForm.links + "/pages/news/newsdetail/newsdetail?id=" + row.id;
            }
            if (row.url_title == "资讯分类") {
                this.ruleForm.links = this.ruleForm.links + "/news?cate_id=" + row.id;
            }
            if (row.url_title == "商品分类2") {
                this.ruleForm.links = "/shop/shopslide?cate_id=" + row.id;
            }
        },
        onSuccess (pic) {
            this.ruleForm.piclink = pic;
            this.showImg = true;
        },
        submitForm (formName) {
            // if (
            //     this.ruleForm.types == null ||
            //     this.ruleForm.types == "" ||
            //     this.ruleForm.types == undefined
            // ) {
            //     this.$fnc.alertError("请选择类型");
            //     return;
            // }
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$emit("openThis");
                    var params = {};

                    params.msg = this.ruleForm.msg;
                    if (this.ruleForm.types == 1) {
                        params.links = this.ruleForm.links;
                    }

                    params.piclink = this.ruleForm.piclink;
                    params.types = this.ruleForm.types;
                    if (this.isUser) {
                        // params.types = 1;
                        params.id = this.service.id;
                        this.$api.getUser.send_user_msg(params).then(res => {
                            if (res.data.code == 200) {
                                this.$emit("openThis", true);
                                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                            } else {
                                this.$fnc.alertError(res.data.result); //失败弹出框
                            }
                        });
                    } else {
                        // params.types = 2;
                        params.rating = this.ruleForm.rating;
                        this.$api.getUser.sendServiceMsg(params).then(res => {
                            if (res.data.code == 200) {
                                this.$emit("openThis", true);
                                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                            } else {
                                this.$fnc.alertError(res.data.result); //失败弹出框
                            }
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm (formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
